<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <style>
        body {
            margin: 0;
        }
        img {
            width: 100px;
        }
        header {
            padding: 10px;
            background: rgb(54, 144, 218);
            color: white;
        }
        header h1 {
            text-align: center;
            font-size: 20px;
        }
        header>img, header>div {
            vertical-align: middle;
        }
        header>div {
            display: inline-block;
            margin-left: 20px;
        }
        header>img, nav img {
            border-radius: 50%;
        }
        ul {
            list-style: none;
        }
        ul li {
            display: inline-block;
        }
        /* 三个图标分散排列的float方案 */
        ul {
            text-align: center;
            padding-left: 0;
        }
        ul li:nth-of-type(1) {
            float: left;
        }
        ul li:nth-of-type(3) {
            float: right;
        }
        ul li p {
            text-align: center;
        }

        input {
            width: 100%;
        }
        #submit {
            background: rgb(54, 144, 218);
            color: white;
        }
        /* 使用位置选择器，选中：分类：老师，改成蓝色字体 */
        header>div:nth-of-type(2) {
            color: blue;
        }
    </style>
</head>
<body>
    <header>
        <h1>个人中心</h1>
        <img src="imgs/bingge.jpg" alt="">
        <div>
            <div>用户名：兵哥学编程</div>
            <div>分类：老师</div>
        </div>
    </header>
    <nav>
        <ul>
            <li>
                <img src="imgs/nav1.png" alt="导航图片">
                <p>资讯</p>
            </li>
            <li>
                <img src="imgs/nav2.png" alt="导航图片">
                <p>购物</p>
            </li>
            <li>
                <img src="imgs/nav3.png" alt="导航图片">
                <p>抽奖</p>
            </li>
        </ul>
    </nav>
    <form action="#">
        <div>
            <label for="">姓名</label>
            <input type="text" placeholder="请输入姓名">
        </div>
        <div>
            <label for="">密码</label>
            <input type="password" placeholder="请输入密码">
        </div>
        <div>
            <input id="submit" type="submit" value="登录">
        </div>
    </form>
    <footer>
        <h4>说明</h4>
        <p>用的比较多的是清华大学的pip源，它是官网pypi的镜像，每隔5分钟同步一次
            临时使用：
            临时的使用方法是，在安装pip install -i + 源地址+ 安装库名，这样可以临时解决安装问题
            加清华的源  -i https://pypi.tuna.tsinghua.edu.cn/simple                  
            原文链接：https://blog.csdn.net/ytusdc/article/details/89469161
        </p>
    </footer>

</body>
</html>